<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>标签</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="static/css/index.css" rel="stylesheet" />
	</head>

	<body>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：导航
        -->
		<div id="head"></div>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：内容
        -->
		<div class="i-padded-tb-big i-container">
			<div class="ui container">
				<div class="ui top attached segment">
					<div class="ui middle aligned two column grid">
						<div class="column">
							<h3 class="ui teal header">标签</h3>
						</div>
						<div class="right aligned  column">
							共
							<h3 class="ui orange header i-inline-block i-text-thin" id="blogsCount">  </h3> 篇
						</div>
					</div>
				</div>
				<div class="ui attached segment i-padded-tb-large" id="tagGroup">
<!--					<a href="#" target="_blank" class="ui teal basic left pointing large label i-margin-tb-tiny">方法论
						<div class="detail">23</div>
					</a>
					<a href="#" target="_blank" class="ui  basic left pointing large label i-margin-tb-tiny">方法论
						<div class="detail">23</div>
					</a>
					<a href="#" target="_blank" class="ui  basic left pointing large label i-margin-tb-tiny">方法论
						<div class="detail">23</div>
					</a>
					<a href="#" target="_blank" class="ui  basic left pointing large label i-margin-tb-tiny">方法论
						<div class="detail">23</div>
					</a>-->
				</div>
				<div class="ui teal top attached segment" id="content">
					<!--<div class="ui padded  vertical segment i-padded-tb-large i-mobile-lr-clear">
						<div class="ui mobile reversed stackable grid">
							<div class="eleven wide column">
								<h3 class="ui header">你真的理解什么是财富自由吗？</h3>
								<p class="i-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
								<div class="ui stackable grid">
									<div class="row">
										<div class="eleven wide column">
											<div class="ui mini horizontal link list">
												<div class="item">
													<img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image" />
													<div class="content">
														<a href="#" class="header">李仁密</a>
													</div>
												</div>
												<div class="item">
													<i class="calendar icon"></i> 2017-10-01
												</div>
												<div class="item">
													<i class="eye icon"></i> 234
												</div>
											</div>
										</div>
										<div class="right aligned five wide column">
											<a href="#" target="_blank" class="ui teal  basic label i-padded-tiny i-text-thin">
												认知升级
											</a>
										</div>
									</div>
									<div class="row">
										<div class="column">
											<a class="ui teal basic ui left pointing label i-padded-mini i-text-thin" href="#">方法论</a>
										</div>
									</div>
								</div>
							</div>
							<div class="five wide column">
								<a href="#" target="_blank">
									<img src="https://unsplash.it/180/120?image=1005" class="ui rounded " />
								</a>
							</div>
						</div>
					</div>
					<div class="ui padded  vertical segment i-padded-tb-large i-mobile-lr-clear">
						<div class="ui mobile reversed stackable grid">
							<div class="eleven wide column">
								<h3 class="ui header">你真的理解什么是财富自由吗？</h3>
								<p class="i-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
								<div class="ui stackable grid">
									<div class="row">
										<div class="eleven wide column">
											<div class="ui mini horizontal link list">
												<div class="item">
													<img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image" />
													<div class="content">
														<a href="#" class="header">李仁密</a>
													</div>
												</div>
												<div class="item">
													<i class="calendar icon"></i> 2017-10-01
												</div>
												<div class="item">
													<i class="eye icon"></i> 234
												</div>
											</div>
										</div>
										<div class="right aligned five wide column">
											<a href="#" target="_blank" class="ui teal  basic label i-padded-tiny i-text-thin">
												认知升级
											</a>
										</div>
									</div>
									<div class="row">
										<div class="column">
											<a class="ui teal basic ui left pointing label i-padded-mini i-text-thin" href="#">方法论</a>
										</div>
									</div>
								</div>
							</div>
							<div class="five wide column">
								<a href="#" target="_blank">
									<img src="https://unsplash.it/180/120?image=1005" class="ui rounded " />
								</a>
							</div>
						</div>
					</div>
					<div class="ui padded  vertical segment i-padded-tb-large i-mobile-lr-clear">
						<div class="ui mobile reversed stackable grid">
							<div class="eleven wide column">
								<h3 class="ui header">你真的理解什么是财富自由吗？</h3>
								<p class="i-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
								<div class="ui stackable grid">
									<div class="row">
										<div class="eleven wide column">
											<div class="ui mini horizontal link list">
												<div class="item">
													<img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image" />
													<div class="content">
														<a href="#" class="header">李仁密</a>
													</div>
												</div>
												<div class="item">
													<i class="calendar icon"></i> 2017-10-01
												</div>
												<div class="item">
													<i class="eye icon"></i> 234
												</div>
											</div>
										</div>
										<div class="right aligned five wide column">
											<a href="#" target="_blank" class="ui teal  basic label i-padded-tiny i-text-thin">
												认知升级
											</a>
										</div>
									</div>
									<div class="row">
										<div class="column">
											<a class="ui teal basic ui left pointing label i-padded-mini i-text-thin" href="#">方法论</a>
										</div>
									</div>
								</div>
							</div>
							<div class="five wide column">
								<a href="#" target="_blank">
									<img src="https://unsplash.it/180/120?image=1005" class="ui rounded " />
								</a>
							</div>
						</div>
					</div>
					<div class="ui padded  vertical segment i-padded-tb-large i-mobile-lr-clear">
						<div class="ui mobile reversed stackable grid">
							<div class="eleven wide column">
								<h3 class="ui header">你真的理解什么是财富自由吗？</h3>
								<p class="i-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
								<div class="ui stackable grid">
									<div class="row">
										<div class="eleven wide column">
											<div class="ui mini horizontal link list">
												<div class="item">
													<img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image" />
													<div class="content">
														<a href="#" class="header">李仁密</a>
													</div>
												</div>
												<div class="item">
													<i class="calendar icon"></i> 2017-10-01
												</div>
												<div class="item">
													<i class="eye icon"></i> 234
												</div>
											</div>
										</div>
										<div class="right aligned five wide column">
											<a href="#" target="_blank" class="ui teal  basic label i-padded-tiny i-text-thin">
												认知升级
											</a>
										</div>
									</div>
									<div class="row">
										<div class="column">
											<a class="ui teal basic ui left pointing label i-padded-mini i-text-thin" href="#">方法论</a>
										</div>
									</div>
								</div>
							</div>
							<div class="five wide column">
								<a href="#" target="_blank">
									<img src="https://unsplash.it/180/120?image=1005" class="ui rounded " />
								</a>
							</div>
						</div>
					</div>
					<div class="ui padded  vertical segment i-padded-tb-large i-mobile-lr-clear">
						<div class="ui mobile reversed stackable grid">
							<div class="eleven wide column">
								<h3 class="ui header">你真的理解什么是财富自由吗？</h3>
								<p class="i-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
								<div class="ui stackable grid">
									<div class="row">
										<div class="eleven wide column">
											<div class="ui mini horizontal link list">
												<div class="item">
													<img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image" />
													<div class="content">
														<a href="#" class="header">李仁密</a>
													</div>
												</div>
												<div class="item">
													<i class="calendar icon"></i> 2017-10-01
												</div>
												<div class="item">
													<i class="eye icon"></i> 234
												</div>
											</div>
										</div>
										<div class="right aligned five wide column">
											<a href="#" target="_blank" class="ui teal  basic label i-padded-tiny i-text-thin">
												认知升级
											</a>
										</div>
									</div>
									<div class="row">
										<div class="column">
											<a class="ui teal basic ui left pointing label i-padded-mini i-text-thin" href="#">方法论</a>
										</div>
									</div>
								</div>
							</div>
							<div class="five wide column">
								<a href="#" target="_blank">
									<img src="https://unsplash.it/180/120?image=1005" class="ui rounded " />
								</a>
							</div>
						</div>
					</div>-->
				</div>
				<!--footer-->
				<div class="ui bootom attached segment">
					<div class="ui middle aligned two column grid">
						<div class="column">
							<a class="ui mini teal basic button" id="before">上一页</a>
						</div>
						<div class="right aligned  column">
							<a class="ui mini teal basic button" id="next">下一页</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：footer
        -->
		<div id="foot"></div>

	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script src="static/js/function.js"></script>
	<script>
		$('.menu.toggle').click(function() {
			$('.i-item').toggleClass('i-mobile-hide');
		});

		var defaultTagName = "";
		var pageNumber=1;
		var pageSize=10;
		var currentTagName="";
		
		$(function(){
			var pageType = getQueryVariable('type');
			$('#head').load('common/head.html',null,function(){
				$('.navbarlist a').removeClass('active');
				$('.navbarlist a:eq(2)').addClass('active');
			});
			$('#foot').load('common/foot.html');
			getTagsNameAndCount();
			if(pageType == 'default'){
				getBlogByTag(defaultTagName,pageNumber,pageSize);
			}
			else if(pageType == 'jump'){
				var name = getQueryVariable('name')
				getBlogByTag(decodeURI(name),pageNumber,pageSize);
			}
			
		})
		
		//分类名称及数量
		function getTagsNameAndCount(){
			$.ajax({
				url:urlPath+"/index/api/getTagsNameAndCount",
				type:'get',
				async:false,
				success:function(res){
					if(res.code == 200){
						var tags = res.data.tags;
						var tagGroupHtml="";
						var tagGroup = $('#tagGroup');
						if(tags.length>0){
							defaultTagName = tags[0].name;
							for(var i=0;i<tags.length;i++){
								tagGroupHtml+='<a class="ui  basic left pointing large label i-margin-tb-tiny" href="javascript:void(0)" '+ 
								            'onclick=getBlogByTag("'+tags[i].name+'","'+pageNumber+'","'+pageSize+'")>'+tags[i].name+
											'<div class="detail">'+tags[i].blogsOfTagCount+'</div>'+
											'<a>';
							}
							tagGroup.append(tagGroupHtml);
						}
					}
				}
			})
		}
		
		//根据分类查博客
		function getBlogByTag(tagName,pageNumber,pageSize){
			$('.label').removeClass('teal');
			$('a:contains('+tagName+')').map(function(){
				var reg = /[\u4e00-\u9fa5]/g;   
				var tmp = $(this).text().match(reg).join('');
				if(tmp == tagName){
					$(this).addClass('teal');
				}
			})
			$('#content').children().remove();
			currentTagName = tagName;
			$.ajax({
				url:urlPath+"/index/api/getBlogByTag",
				type:"post",
				data:{"tagName":tagName,"pageNumber":pageNumber,"pageSize":pageSize},
				success:function(res){
					$('#blogsCount').text(res.data.total);
					if(res.code == 200){
					  var blogsData = res.data;
					  var blogsRow = blogsData.rows;
					  var contentHtml = $('#content');
					  var html="";
					  if(blogsRow.length>0){
						  for(var i=0;i<blogsRow.length;i++){
							  //首图不为空用首图,否则使用上传图片
							  var picture = blogsRow[i].firstPicture;
							  if(picture == null && blogsRow[i].files != null){
								  picture = blogsRow[i].files[0].fileAddr;
							  }
							  html="<div class='ui padded vertical segment i-paded-tb-largs i-mobile-lr-clear'>"+
										"<div class='ui mobile reversed stackable grid'>"+
											"<div class='eleven wide column' onclick=toBlogDetail('"+blogsRow[i].id+"')>"+
												"<h3 class='ui header'>"+blogsRow[i].title+"</h3>"+
												"<p class='i-text'>"+blogsRow[i].description+"</p>"+
												"<div class='ui grid'>"+
													"<div class='eleven wide column'>"+
														"<div class='ui mini horizontal link list'>"+
															"<div class='item'>"+
																"<img src="+blogsRow[i].avatar+" alt='' class='ui avatar image'/>"+
																"<div class='content'>"+
																	"<a href='#' class='header'>"+blogsRow[i].nickName+"</a>"+
																"</div>"+
															"</div>"+
															"<div class='item'>"+
																"<i class='calendar icon'></i>"+blogsRow[i].createTime+
															"</div>"+
															"<div class='item'>"+
																"<i class='eye icon'></i>"+blogsRow[i].views+
															"</div>"+
														"</div>"+
													"</div>"+
												"<div class='right aligned five wide column'>"+
													"<a href='#' class='ui teal basic label i-padded-tiny i-text-thin'>认知升级"+
												"</div>"+
											"</div>"+
										"</div>"+
									"<div class='five wide column'>"+
										"<a href='#'>"+		
											"<img class='ui large image' src="+picture+"/>"+
										"</a>"+
									"</div>"+
								"</div>"+
							"</div>"
							contentHtml.append(html);
						  }
					  }
					}
				}
			})
		}
		
		$('#next').on('click',function(){
			$('#content').children().remove();
			var total=$('#blogsCount').text();
			var maxPageNumber = Math.ceil(total/10);
			pageNumber = pageNumber==maxPageNumber?maxPageNumber:pageNumber+1;
			getBlogByTag(currentTagName,pageNumber,pageSize);
		})
		
		$('#before').on('click',function(){
			$('#content').children().remove();
			pageNumber = pageNumber== 1 ? 1:pageNumber-1;
			getBlogByTag(currentTagName, pageNumber,pageSize);
		})
		
		
	</script>

</html>